<div class="p15">
    {include file="common/breadcrumb" /}
    <div class="pl30 pr30 mt20">
        <form action="{:url('edit',['id'=>$aid])}" method="post" id="J_ue-form">
            <div class="am-form am-form-horizontal" data-am-validator>
                 <div class="am-form-group">
                    <label class="am-para-label">文章状态：</label>
                    <div class="am-para-input">
                        <select required name="post_status">
                            <option value="publish" {$data.post_status=="publish" ? "checked" :""}>发布</option>
                            <option value="draft" {$data.post_status=="draft" ? "checked" :""}>保存草稿</option>
                            <option value="trash" {$data.post_status=="trash" ? "checked" :""}>垃圾回收站</option>
                        </select>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label">所属分类：</label>
                    <div class="am-para-input">
                        <select required name="classifyid">
                            {$selOption}
                        </select>
                    </div>
                </div>

               
                <div class="am-form-group">
                    <label class="am-para-label">标题：</label>
                    <div class="am-para-input">
                        <input type="text" minlength="3" placeholder="请输入标题" required name="title" value="{$data.title|default=''}" />
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label">标签：</label>
                    <div class="am-para-input">
                        <style type="text/css">
                        .tag-list {
                            margin-right: 30px;
                        }

                        .tag-list li {
                            position: relative;
                            margin-right: 20px;
                        }

                        .tag-list li span {
                            position: absolute;
                            right: -9px;
                            top: -9px;
                            width: 20px;
                            height: 20px;
                            background: rgba(0, 0, 0, 0.8);
                            border-radius: 100%;
                        }

                        .tag-list li span i {
                            font-size: 12px;
                        }
                        </style>
                        <ul class="tag-list fl" id="J_tag-list-choice">
                            {volist name="tags" id="vo" key='k'}
                            <li class="am-btn am-btn-primary" data-index="{$k-1}">{$vo}<span><i class="iconfont icon-shanchu"></i></span></li>
                            {/volist}
                        </ul>
                        <a href="#" class="am-btn am-btn-success am-round" id="J_choice-tag-btn">选择标签</a>
                        <a href="#" class="am-btn am-btn-success am-round" id="J_add-tag-btn">添加标签</a>
                        <input type="hidden" name="tags" id="J_ipt-tags" value="{$data.tags}">
                        <input type="hidden" name="tagid" id="J_ipt-tagid" value="{$data.tagid}">
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label">缩略图:</label>
                    <div class="am-para-input">
                        <div class="coms-plupload-container ">
                            <div class='coms-plupload-nofile  {if condition="$data.coverimg"}none{/if}'></div>
                            <ul class="coms-upload-list clearfix">
                                {if condition="$data.coverimg"}
                                <li data-url="{$data.coverimg}">
                                    <div class="img-wrap">
                                        <div class="preview-pic" style="display:block;"><img src="{$data.coverimg}" class="uploadimg" /></div>
                                    </div>
                                    <input type="hidden" name="coverimg" value="{$data.coverimg}">
                                </li>
                                {/if}
                            </ul>
                            <div class="coms-btn-choice  clearfix">
                                <a id="J_pickfiles1" class="btn-pickfiles" href="javascript:;">选择文件</a>
                                <a href="javascript:void(0);" class="btn-startload-file">上传文件</a>
                                <a href="javascript:void(0);" class="btn-stopload-file">暂停上传</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="am-form-group">
                    <label class="am-para-label">轮播图:</label>
                    <div class="am-para-input">
                        <div class="coms-plupload-container ">
                            <div class='coms-plupload-nofile  {if condition="$data.carouselimg"}none{/if}'></div>
                            <ul class="coms-upload-list clearfix">
                                {if condition="$data.carouselimg"}
                                <li data-url="{$data.carouselimg}">
                                    <div class="img-wrap">
                                        <div class="preview-pic" style="display:block;"><img src="{$data.carouselimg}" class="uploadimg" /></div>
                                    </div>
                                    <input type="hidden" name="carouselimg" value="{$data.carouselimg}">
                                </li>
                                {/if}
                            </ul>
                            <div class="coms-btn-choice  clearfix">
                                <a id="J_pickfiles2" class="btn-pickfiles" href="javascript:;">选择文件</a>
                                <a href="javascript:void(0);" class="btn-startload-file">上传文件</a>
                                <a href="javascript:void(0);" class="btn-stopload-file">暂停上传</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="am-form-group">
                    <label class="am-para-label">关键词：</label>
                    <div class="am-para-input">
                        <input type="text" placeholder="请输入关键词" name="keyword" value="{$data.keyword|default=''}" />
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label">描述：</label>
                    <div class="am-para-input">
                        <textarea class="" rows="3" id="doc-ta-1" name="description">{$data.description|default=''}</textarea>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label">作者：</label>
                    <div class="am-para-input">
                        <input type="text" placeholder="请输入作者" name="author" value="{$data.author|default=''}" />
                    </div>
                </div>
                 <div class="am-form-group">
                    <label class="am-para-label">来源：</label>
                    <div class="am-para-input">
                        <input type="text" placeholder="请输入来源" name="source"  value="{$data.source|default=''}" />
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label">内容：</label>
                    <div class="am-para-input">
                        <textarea class="am-validate" id="J_ue-content" name="content" required>{$data.content|default=''} </textarea>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label">是否评论：</label>
                    <div class="am-para-input">
                        <label class="am-radio-inline">
                            <input type="radio" value="1" {$data.is_comment ? 'checked' : ''} name="is_comment">是
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" value="0" {$data.is_comment ? '' : 'checked'} name="is_comment">否
                        </label>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label">是否置顶：</label>
                    <div class="am-para-input">
                        <label class="am-radio-inline">
                            <input type="radio" value="1" {$data.is_top ? 'checked' : ''} name="is_top">是
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" value="0" {$data.is_top ? '' : 'checked'} name="is_top">否
                        </label>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-para-label"></label>
                    <div class="am-para-input">
                        <input type="submit" value="提交" class="am-btn am-btn-success" />
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<style type="text/css">
.taglist-dialog {
    display: none;
    padding: 20px;
}

.taglist-dialog ul li {
    margin: 0 8px;
    position: relative;
}

.taglist-dialog ul li span {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.7);
    right: -9px;
    top: -9px;
    overflow: hidden;
    border-radius: 100%;
    display: none;
}

.taglist-dialog ul li span i {
    color: #fff;
}

.taglist-dialog ul li.selected span {
    display: block;
}
</style>
<div class="taglist-dialog" id="J_taglist-dialog">
    <ul id="J_taglist">
    </ul>
</div>
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/js/plugin/plupload/plupload.css" />
<script type="text/javascript" src="__STATIC__/admin/js/plugin/ueditor1_4_3/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/plugin/ueditor1_4_3/ueditor.all.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/plugin/plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/plugin/plupload/uploadfile.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
    //添加标签

    var tagData = [];
    var aid = {$aid};

    $.ajax({
        url: "{:url('tagList')}",
        type: "post",
        data: { "aid": aid },
        dataType: "json",
        success: function(data) {
            if (!!data.length) {
                tagData = data;

                var str = "";
                $.each(data, function(index, obj) {
                    if (obj.selected) {
                        str += '<li class="am-btn am-btn-primary" data-index="' + index + '">' + obj.name + '<span><i class="iconfont icon-shanchu"></i></span></li>';
                    }
                });
                $("#J_tag-list-choice").html(str);
            }
        }
    })












    function renderAppend(data, elemId) {
        var str = "";
        $.each(data, function(index, obj) {
            str += '<li class="am-btn am-btn-default ' + (!!obj.selected ? "selected" : "") + '">' + obj.name + '<span><i class="iconfont icon-shanchu"></i></span></li>';
        });
        $("#" + elemId).html(str);
    }

    function openChoiceDialg() {
        layer.open({
            type: 1,
            shade: false,
            area: '400px',
            content: $("#J_taglist-dialog"),
            btn: ['插入', '取消'],
            yes: function() {
                addTag(tagData);
                layer.closeAll();
            }
        })
    }
    $("#J_choice-tag-btn").on("click", function(event) {
        event.preventDefault();
        if (!!tagData && tagData.length) {
            renderAppend(tagData, "J_taglist");
            openChoiceDialg();
        } else {
            $.ajax({
                url: "{:url('tagList')}",
                type: "post",
                data: { "aid": aid },
                dataType: "json",
                success: function(data) {
                    if (!!data.length) {
                        tagData = data;
                        console.dir(tagData)
                        renderAppend(tagData, "J_taglist");
                        openChoiceDialg();
                    }
                }
            })
        }
    })
    $("#J_taglist").on("click", "li", function() {
        var $this = $(this);
        var index = $("#J_taglist").children().index(this);

        if ($this.hasClass('selected')) {
            $this.removeClass('selected');
            tagData[index].selected = false;
        } else {
            $this.addClass('selected');
            tagData[index].selected = true;
        }
    });

    $("#J_tag-list-choice").on("click", "span", function() {
        var $li = $(this).parent();
        var index = $li.data("index");
        console.dir(tagData);
        tagData[index].selected = false;
        addTag(tagData);
    })

    function addTag(data) {
        var str = "";
        var tagStr = [];
        var tagId = [];
        var $container = $("#J_tag-list-choice");
        $.each(data, function(index, obj) {
            if (!!obj.selected) {
                tagStr.push(obj.name);
                tagId.push(obj.id)
                str += '<li class="am-btn am-btn-primary" data-index="' + index + '">' + obj.name + '<span><i class="iconfont icon-shanchu"></i></span></li>';
            }
        });
        $container.html(str);
        $("#J_ipt-tags").val(tagStr.join(","));
        $("#J_ipt-tagid").val(tagId.join(","));

    }



    var ue = UE.getEditor('J_ue-content');
    ue.ready(function() {
        ue.setHeight(300);
    })

    var $textArea = $("#J_ue-content");
    var $form = $("#J_ue-form");
    $form.validator({
        submit: function() {
            ue.sync();
            var formValidity = this.isFormValid();
            if (!formValidity && $form.find('.' + this.options.inValidClass).eq(0).is($textArea)) {
                ue.focus();
                return false;
            }






        }
    })

    ue.addListener('contentChange', function() {
        ue.sync();
        // 触发验证
        $('[name=content]').trigger('change');
    });
})




$(function() {

    $(".uploading-img-list .success-edit-del").on("click", function(event) {

        event.preventDefault();
        var $li = $(this).parent("li");
        var url = $li.data("url");

        // var index = url.lastIndexOf("/");

        // var imgName = url.slice(index + 1);
        $.ajax({
            url: "{:url('fileImgDel')}",
            type: "post",
            data: { "filename": url, "id": {$data.id}},
            dataType: "json",
            success: function(data) {
                if (data == 1) {
                    $li.remove();
                    showError("删除成功！");
                    $("#J_no-pic").removeClass("none");
                    $("#J_covering").val("");
                } else {
                    showError("删除失败！");
                }
            }

        })
    })
});

(function($) {
    $(function() {
        coverimgUploader = $("#J_pickfiles1").plupload({
            url: '__STATIC__/admin/js/plugin/plupload/php/upload.php',
            delServerBtn: false,
            inputHidden: {
                name: "coverimg"
            },
            filters: {
                max_file_count: 1
            },
            multipart_params: {

            },
            initLoad: function(up) {

            },
            //每个文件上传成功调用函数
            fileUploaded: function(up, file, info) {

            },
            //plupload 执行全部的上传事件后触发该函数，只触发一次
            uploadComplete: function(up, files) {

            }
        });
    });
})(jQuery);

(function($) {
    $(function() {

        carouselUploader = $("#J_pickfiles2").plupload({
            url: '__STATIC__/admin/js/plugin/plupload/php/upload.php',
            delServerBtn: false,
            inputHidden: {
                name: "carouselimg"
            },
            filters: {
                max_file_count: 1
            },
            multipart_params: {

            },
            initLoad: function(up) {

            },
            //每个文件上传成功调用函数
            fileUploaded: function(up, file, info) {

            },
            //plupload 执行全部的上传事件后触发该函数，只触发一次
            uploadComplete: function(up, files) {

            }
        });
    });
})(jQuery)
</script>